<template>
  <div>
    <!-- 面包屑导航   -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>房源管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加房源</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图   -->
    <el-card class="box-card">
      <!--  表单  -->
      <el-form ref="form" :model="form" label-width="120px" label-position="left" >
        <el-form-item label="房源地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="街道（镇/乡）">
          <el-input v-model="form.street"></el-input>
        </el-form-item>
        <el-form-item label="社区">
          <el-input v-model="form.community"></el-input>
        </el-form-item>
        <el-form-item label="门牌号">
          <el-input v-model="form.number"></el-input>
        </el-form-item>
        <!--  增加房源    -->
        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>重置表单</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        address: '',
        street: '',
        community: '',
        number: ''
      }
    }
  },
  methods: {
    // 添加房源
    async onSubmit() {
      console.log(this.form)
      const form = {
        action: 'add',
        data: {
          address: this.form.address,
          street: this.form.street,
          community: this.form.community,
          number: this.form.number,
          user_id: window.sessionStorage.getItem('userid')
        }
      }
      const { data: res } = await this.$http.post('/api/mgr/address', form)
      console.log(res)
      if(res.ret !== 0){
        this.$message.error('添加房源失败！')
      }
      this.$message.success('添加房源成功')
    }
  }
}
</script>

<style scoped>

</style>
